<template>
  <div>
    <Row>
      <Col :span="24" class="form-box">
        <Form ref="form" :label-width="150" inline>
          <FormItem label="商品名词">
            <Input v-model="goodsName"></Input>
          </FormItem>
          <FormItem label="选择类型">
            <Select v-model="state" style="width: 200px">
              <Option value="">全部</Option>
              <Option value="0">已上架</Option>
              <Option value="1">已下架</Option>
            </Select>
          </FormItem>
          <Button type="primary" @click="search()" style="margin-left: 20px;">查询</Button>
          <Button type="success" @click="add()" style="margin-left: 20px;">批量导入数据</Button>
          <FormItem label="导入前请使用模版">
            <Button type="success" @click="download()">下载模版</Button>
          </FormItem>
        </Form>
      </Col>

      <div class="table-container">
        <Table border :max-height="800" stripe :columns="getCols()" :data="tableData" no-data-text="未查询到数据">
        </Table>
      </div>
      <div class="page-container" v-if="total > 10">
        <Page :total="total" @on-change="pageChange"></Page>
      </div>
    </Row>

    <Modal v-model="isShowUpload" footer-hide title="上传Excle表格批量插入">
      <div class="center">
        <Upload :action="uploadPath">
          <Button icon="ios-cloud-upload-outline">导入数据</Button>
        </Upload>
      </div>
    </Modal>

    <Modal v-model="isShowEditModel" title="修改数据" @on-ok="submitUpdate">
      <Form :model="rowData" label-position="left">
        <FormItem label="商品名字">
          <Input type="text" v-model="rowData.shopGoodsName"></Input>
        </FormItem>
        <FormItem label="商品颜色">
          <Input type="text" v-model="rowData.shopGoodsColor"></Input>
        </FormItem>
        <FormItem label="商品分类">
          <RadioGroup v-model="rowData.shopThreeId" style="height:100px;overflow-y: auto;">
            <Radio v-for="item in threeTypes" :label="item.shopThreeId">{{item.shopThreeName}}</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="商品发货地">
          <Input type="text" v-model="rowData.shopGoodsOrigin"></Input>
        </FormItem>
        <FormItem label="商品说明">
          <Input type="textarea" :rows="2" v-model="rowData.shopGoodsExplain"></Input>
        </FormItem>
        <FormItem label="商品服务">
          <Input type="textarea" :rows="2" v-model="rowData.shopGoodsServer"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "list",
  data() {
    return {
      goodsName: '',
      state: '',
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      total: 0,
      isShowUpload: false,
      isShowEditModel: false,
      uploadPath: 'http://' + location.hostname + ":8110/goods/up",
      rowData: {},
      threeTypeId:'',
      rowForm: {
        goodsName: ''
      },
      threeTypes:[]
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    search() {
      this.loadData()
    },
    getCols() {
      let that = this;
      return [
        {title: '商品名词', key: 'shopGoodsName', tooltip: true, align: 'center', width: 150},
        {title: '颜色', key: 'shopGoodsColor', tooltip: true, align: 'center', width: 100},
        {
          title: '商品照片', key: 'shopGoodsPicture', tooltip: true, align: 'center', width: 70, render(h, obj) {
            return h(('img'), {attrs: {src: obj.row.shopGoodsPicture, style: 'max-width:100%;max-height:100%;'}});
          }
        },
        {title: '品牌', key: 'shopGoodsBrand', tooltip: true, align: 'center', width: 100},
        {title: '商品型号', key: 'shopGoodsModel', tooltip: true, align: 'center', width: 150},
        {title: '商品材质', key: 'shopGoodsTexture', tooltip: true, align: 'center', width: 100},
        {title: '商品产地', key: 'shopGoodsAddress', tooltip: true, align: 'center', width: 150},
        {title: '商品发货地', key: 'shopGoodsOrigin', tooltip: true, align: 'center', width: 120},
        {title: '商品说明', key: 'shopGoodsExplain', tooltip: true, align: 'center'},
        {title: '商品服务', key: 'shopGoodsServer', tooltip: true, align: 'center'},
        {title: '好评度', key: 'shopGoodsFeedback', tooltip: true, align: 'center', width: 100},
        {title: '折扣点', key: 'shopGoodsDiscount', tooltip: true, align: 'center', width: 100},
        {title: '销量', key: 'shopGoodsMarket', tooltip: true, align: 'center', width: 80},
        {
          title: '商品状态', key: 'shopGoodsState', tooltip: true, align: 'center', width: 100, render(h, obj) {
            return h(('Button'), {
              attrs: {
                type: obj.row.shopGoodsState === "0" ? "success" : "error",
                size: 'small'
              },
              on: {
                click() {
                  that.upDownGoods(obj.row)
                }
              }
            }, obj.row.shopGoodsState === "0" ? "上架" : "下架")
          }
        },
        {
          title: '操作', key: 'operator', tooltip: true, align: 'center', width: 80, render(h, obj) {
            return h(('Button'), {
              attrs: {type: "success", size: 'small'}, on: {
                click() {
                  that.editGoods(obj.row)
                }
              }
            }, "编辑")
          }
        }
      ]
    },
    pageChange(val) {
      this.pageNum = val
      this.loadData()
    },
    loadData() {
      let that = this;
      let params = {}
      params.goodsName = this.goodsName
      params.state = this.state
      params.pageNum = this.pageNum ? this.pageNum : 0
      params.pageSize = this.pageSize
      this.$http.postJson('/goods/list', params).then(res => {
        that.pageSize = res.pageSize
        that.pageNum = res.pageNum
        that.tableData = res.data ? res.data : []
        that.total = res.total
      }).catch(() => {
        that.tableData = []
        that.total = 0
      })
    },
    add() {
      this.isShowUpload = true
    },
    download() {
      window.open("http://" + location.hostname + ":8110/goods/download/xls")
    },
    editGoods(row) {
      this.isShowEditModel = true
      this.rowData = row
      let that = this;
      this.$http.get('/goods/queryAll/three').then(res => {
        that.threeTypes = res
      })
    },
    upDownGoods(row) {
      let that = this;
      let params = {}
      params.goodsId = row.shopGoodsId
      params.state = row.shopGoodsState === "0" ? "1" : "0"
      that.$http.postJson("/goods/down", params).then(res => {
        that.$Message.success("修改状态成功")
        that.loadData()
      }).catch(() => {
        that.$Message.error("修改状态失败")
        that.loadData()
      })
    },
    submitUpdate(){
      let that = this;
      alert(JSON.stringify(that.rowData))
      that.$http.postJson('/goods/update',that.rowData).then(res => {
        that.$Message.success("更新成功")
        that.loadData()
      }).catch(() => {
        that.$Message.error("更新失败")
        that.loadData()
      })
    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

.page-container {
  display: flex;
  width: calc(100% - 40px);
  justify-content: flex-end;
  margin-top: 20px;
}

.center {
  display: flex;
  justify-content: center;
}
</style>
